<template>
	<view class="content">
		<u-popup :show="show" :round="10" mode="bottom" @close="close" zIndex=99999>
			<view class="login-pop-up">
				<view class="login-pop-up-close" @click="close">
					<image src="../../static/images/gb.png" mode=""></image>
				</view>
				<view class="login-pop-up-tit">
					<view class="login-pop-up-tit-one">
						请登录授权头像昵称
					</view>
					<view class="login-pop-up-tit-two">
						相关操作涉及用户信息
					</view>
					<view class="login-pop-up-tit-three">
						<image class="avatar" :src="form.avatar" mode=""></image>
						<button :style="{'background-color':form.avatar?'transparent':'#E0FAF2'}"
							open-type="chooseAvatar" @chooseavatar="chooseavatar" class="choose-avatar">
							<text :style="{'color':form.avatar?'transparent':'#C0C4CC'}">头像</text>
						</button>
					</view>
					<view class="login-pop-up-tit-four">

						<input @change="getnickname" type="nickname" v-model="form.nickname" class="nickname"
							placeholder="请输入昵称">
					</view>
					<view class="login-pop-up-tit-five" @click="goAgree">
						登录前请阅读《XXXXXXXX》
					</view>
					<view class="login-pop-up-tit-six">
						<button @click="zhuceUse">同意并登录</button>
					</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import config from '@/common/config.js';
	const uploadUrl = config.baseUrl + '/addons/zzyy/api.common/upload'
	import {
		user_register_api
	} from '@/common/api.js'
	export default {
		props: {
			show: {

			}
		},
		data() {
			return {
				form: {
					avatar: '',
					nickname: '',
					code: ''
				}
			}
		},
		mounted() {
			uni.login({
				provider: 'weixin',
				success: (res) => {
					console.log(res);
					this.form.code = res.code
				},
				fail: (err) => {
					console.log(err);
				},
			})
		},
		methods: {
			zhuceUse() {
				if (!this.form.avatar) return uni.$u.toast('请选择头像')
				if (!this.form.nickname) return uni.$u.toast('请输入昵称')
				user_register_api(this.form).then((res) => {
					if (1 == res.code) {
						uni.$u.toast('注册成功')
						this.vuex_login(res)
					} else {
						uni.$u.toast('注册失败,' + res.msg)
					}

					this.close()
				}).finally(()=>{
					this.$emit('registeredSuccess')
				})
			},
			getnickname(e) {
				console.log(e);
				this.form.nickname = e.detail.value;
			},
			chooseavatar({
				target: {
					avatarUrl
				}
			}) {
				console.log(avatarUrl);
				uni.uploadFile({
					url: uploadUrl,
					filePath: avatarUrl,
					name: 'file',
					success: (res) => {
						let error = 0;
						if (200 == res.statusCode) {
							let data = JSON.parse(res.data)
							console.log(data);
							if (1 == data.code) {
								this.form.avatar = data.data.fullurl
							} else {
								error = 1
							}
						} else {
							error = 1
						}
						uni.hideLoading()
						if (1 == error) {
							this.$u.toast('头像上传失败');
						}
					}
				});
			},
			close() {
				this.$emit("close")
			},
			goAgree() {
				uni.navigateTo({
					url: `/pages/paymentPage/agreement`
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.login-pop-up {
		width: 750rpx;

		.login-pop-up-close {
			image {
				width: 48rpx;
				height: 48rpx;
				margin: 24rpx 0 0 24rpx;
			}
		}

		.login-pop-up-tit {
			width: 750rpx;
			// text-align: center;
			margin-top: 36rpx;

			.login-pop-up-tit-one {
				font-size: 36rpx;
				height: 56rpx;
				font-weight: 500;
				color: #303133;
				text-align: center;
			}

			.login-pop-up-tit-two {
				height: 50rpx;
				font-size: 28rpx;
				text-align: center;
				font-weight: 400;
				color: #606266;
			}

			.login-pop-up-tit-three {
				width: 192rpx;
				height: 192rpx;
				border-radius: 50%;
				margin: 62rpx auto 0;
				border: 4rpx solid #303133;
				box-sizing: border-box;
				position: relative;

				.choose-avatar {
					position: absolute;
					top: 0;
					width: 100%;
					height: 100%;
					background-color: transparent;
					outline: none;
					border: none;
					line-height: 192rpx;
					border-radius: 50%;
					color: #C0C4CC;
				}

				.u-upload {
					// border-radius: 50%;
				}

				.avatar {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					position: relative;
				}
			}

			.login-pop-up-tit-three {
				// margin: 62rpx 0 64rpx 280rpx;
			}

			.login-pop-up-tit-four {
				width: 460rpx;
				background: #E0FAF2;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				border: 4rpx solid #303133;
				margin: 64rpx auto 0rpx auto;

				.nickname {
					height: 88rpx;
					padding: 0 24rpx;
				}

				.u-input {
					font-size: 36rpx;
					height: 44rpx;
					font-weight: 500;
					color: #C0C4CC;
				}
			}

			.login-pop-up-tit-five {
				margin-top: 80rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #303133;
				height: 50rpx;
			}

			.login-pop-up-tit-six {

				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin: 16rpx auto 30rpx;

				button {
					width: 654rpx;
					height: 96rpx;
					background: #40C6A1;
					font-size: 36rpx;
					font-weight: 500;
					color: #F3F4F6;
				}
			}


		}

	}
</style>